 <!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <h1>Phoenix Tracing</h1>
</div>
<div class="page-header">

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <div class="caption">
        <h3><i class="fa fa-list fa-5"></i>  List</h3>
        <p>The most recent traces are listed down. The limiting value is used to determine the trace count displayed. With each trace there is an option to view either the dependency tree or the timeline.</p>
        <p><a href="#list" class="btn btn-primary" role="button">View</a></p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <div class="caption">
        <h3><i class="fa fa-bar-chart"></i>  Trace Count</h3>
        <p>The trace list is categorized by the description. The trace count chart can be viewed as pie charts, line charts, bar charts and area charts. The chart changing option is collapseble and could be hidden.</p>
        <p><a href="#count-chart" class="btn btn-primary" role="button">View</a></p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <div class="caption">
        <h3><i class="fa fa-pie-chart"></i>  Trace Distribution</h3>
        <p>The trace distribution chart shows the traces across Phoenix hosts on which they are running. The charts used are pie charts, line charts, bar charts and area charts. The chart changing option is collapseble and could be hidden.</p>
        <p><a href="#trace-distribution" class="btn btn-primary" role="button">View</a>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <div class="caption">
        <h3><i class="fa fa-sitemap"></i>  Dependency Tree</h3>
        <p>The dependency tree views the traces belonging to a trace id in a tree view. The trace id is the input to the system. The parentchild relationship of the traces can be viewed clearly. The tooltip gives the host name, parent id, span id,start time,end time,description and duration. Each node is collapsable and expandable. The SQL Query is viewed for each search.</p>
        <p><a href="#dependency-tree" class="btn btn-primary" role="button">View</a></p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <div class="caption">
        <h3><i class="fa fa-sliders"></i>  Timeline</h3>
        <p>The traces can be viewed along the timeline for a given trace id. Traces can be added or cleared from the timeline. There should be a minimum of two traces starting at two different times for the system to draw its timeline.</p>
        <p><a href="#trace-timeline" class="btn btn-primary" role="button">View</a></p>
      </div>
    </div>
  </div>
 </div>
</div>
